सीएसएस लॉजिकल प्रॉपर्टीज़ लेवल 2: एन्हांस्ड राइटिंग मोड सपोर्ट के साथ एक वास्तव में वैश्विक वेब का निर्माण

दशकों से, वेब डेवलपर्स ने भौतिक दुनिया में निहित शब्दावली का उपयोग करके लेआउट बनाए हैं: टॉप, बॉटम, लेफ्ट, और राइट। हम एक मार्जिन-लेफ्ट, एक पैडिंग-टॉप और एक बॉर्डर-राइट सेट करते हैं। इस मानसिक मॉडल ने हमारी अच्छी सेवा की जब वेब मुख्य रूप से बाएं-से-दाएं, ऊपर-से-नीचे माध्यम था। हालाँकि, वेब वैश्विक है। यह सभी भाषाओं और संस्कृतियों के लिए एक मंच है, जिनमें से कई इस सरल दिशात्मक प्रवाह का पालन नहीं करते हैं।

अरबी और हिब्रू जैसी भाषाएँ दाएं-से-बाएं लिखी जाती हैं। पारंपरिक जापानी और चीनी को लंबवत रूप से, ऊपर-से-नीचे और दाएं-से-बाएं लिखा जा सकता है। इन लेखन प्रणालियों पर भौतिक, बाएं-से-दाएं सीएसएस मॉडल को लागू करने के परिणामस्वरूप टूटे हुए लेआउट, एक निराशाजनक उपयोगकर्ता अनुभव और कोड ओवरराइड का एक पहाड़ होता है। यहीं पर सीएसएस लॉजिकल प्रॉपर्टीज़ और वैल्यूज़ आती हैं, जो भौतिक दिशाओं से प्रवाह-सापेक्ष, तार्किक दिशाओं में एक मौलिक प्रतिमान बदलाव का प्रतिनिधित्व करती हैं। जबकि लेवल 1 ने आधार तैयार किया, सीएसएस लॉजिकल प्रॉपर्टीज़ लेवल 2 चित्र को पूरा करता है, जो हमें वास्तव में सार्वभौमिक, राइटिंग-मोड-अवेयर उपयोगकर्ता इंटरफेस बनाने के लिए आवश्यक उपकरण प्रदान करता है।

यह व्यापक गाइड आपको लेवल 2 द्वारा लाए गए संवर्द्धन में गहराई से गोता लगाएगा। हम मुख्य अवधारणाओं के एक रिफ्रेशर के साथ शुरुआत करेंगे, फिर उन नई प्रॉपर्टीज़ और वैल्यूज़ का पता लगाएंगे जो अंतराल को भरती हैं, और अंत में, इसे किसी भी राइटिंग मोड के लिए मूल रूप से अनुकूलित करने वाले एक कंपोनेंट का निर्माण करके इसे व्यवहार में लाएंगे। सीएसएस लेआउट के बारे में सोचने के तरीके को हमेशा के लिए बदलने के लिए तैयार रहें।

एक त्वरित रिफ्रेशर: लॉजिकल प्रॉपर्टीज़ की मुख्य अवधारणाएँ (लेवल 1)

लेवल 2 में परिवर्धन की सराहना करने से पहले, हमारे पास लेवल 1 द्वारा रखी गई नींव की ठोस समझ होनी चाहिए। पूरी प्रणाली दो प्रमुख अवधारणाओं पर बनी है: राइटिंग मोड और परिणामी ब्लॉक और इनलाइन अक्ष।

चार राइटिंग मोड

राइटिंग-मोड सीएसएस प्रॉपर्टी यह निर्धारित करती है कि टेक्स्ट किस दिशा में बिछाया गया है। जबकि हम अक्सर डिफ़ॉल्ट को मान लेते हैं, कई वैल्यू हैं जो मौलिक रूप से बदलती हैं कि पेज पर कंटेंट कैसे प्रवाहित होता है:

• हॉरिजॉन्टल-टीबी: यह अधिकांश पश्चिमी भाषाओं के लिए डिफ़ॉल्ट है। टेक्स्ट क्षैतिज रूप से (इनलाइन अक्ष) बाएं-से-दाएं (या दिशा के आधार पर दाएं-से-बाएं) प्रवाहित होता है, और लाइनें ऊपर-से-नीचे (ब्लॉक अक्ष) से स्टैक होती हैं।
• वर्टिकल-आरएल: पारंपरिक पूर्वी एशियाई टाइपोग्राफी (उदाहरण के लिए, जापानी, चीनी) के लिए उपयोग किया जाता है। टेक्स्ट लंबवत रूप से ऊपर-से-नीचे (इनलाइन अक्ष) प्रवाहित होता है, और लाइनें दाएं-से-बाएं (ब्लॉक अक्ष) से स्टैक होती हैं।
• वर्टिकल-एलआर: उपरोक्त के समान, लेकिन लाइनें बाएं-से-दाएं (ब्लॉक अक्ष) से स्टैक होती हैं। कम सामान्य, लेकिन मंगोलियाई लिपि जैसे कुछ संदर्भों में उपयोग किया जाता है।
• साइडलॉन्ग-आरएल / साइडलॉन्ग-एलआर: ये विशिष्ट उपयोग के मामलों के लिए हैं जहां आप ग्लिफ़ को उनके किनारे पर रखना चाहते हैं। वे सामान्य वेब कंटेंट में कम आम हैं।

महत्वपूर्ण अवधारणा: ब्लॉक बनाम इनलाइन अक्ष

यह समझने के लिए सबसे महत्वपूर्ण अवधारणा है। एक तार्किक दुनिया में, हम "वर्टिकल" और "हॉरिजॉन्टल" के बारे में सोचना बंद कर देते हैं और ब्लॉक और इनलाइन अक्षों के संदर्भ में सोचना शुरू कर देते हैं। उनका अभिविन्यास पूरी तरह से राइटिंग-मोड पर निर्भर करता है।

• इनलाइन अक्ष वह दिशा है जिसमें टेक्स्ट एक ही लाइन के भीतर प्रवाहित होता है।
• ब्लॉक अक्ष वह दिशा है जिसमें नई लाइनें स्टैक की जाती हैं।

आइए देखें कि यह कैसे काम करता है:

• मानक अंग्रेजी में (राइटिंग-मोड: हॉरिजॉन्टल-टीबी): इनलाइन अक्ष क्षैतिज रूप से चलता है, और ब्लॉक अक्ष लंबवत रूप से चलता है।
• पारंपरिक जापानी में (राइटिंग-मोड: वर्टिकल-आरएल): इनलाइन अक्ष लंबवत रूप से चलता है, और ब्लॉक अक्ष क्षैतिज रूप से चलता है।

क्योंकि ये अक्ष स्विच कर सकते हैं, विड्थ और हाइट जैसी प्रॉपर्टीज़ अस्पष्ट हो जाती हैं। क्या विड्थ क्षैतिज अक्ष या इनलाइन अक्ष के साथ आकार है? लॉजिकल प्रॉपर्टीज़ इस अस्पष्टता को हल करती हैं। अब हमारे पास प्रत्येक अक्ष के लिए स्टार्ट और एंड है:

• ब्लॉक-स्टार्ट: अंग्रेजी में "टॉप", लेकिन वर्टिकल जापानी में "राइट"।
• ब्लॉक-एंड: अंग्रेजी में "बॉटम", लेकिन वर्टिकल जापानी में "लेफ्ट"।
• इनलाइन-स्टार्ट: अंग्रेजी में "लेफ्ट", लेकिन वर्टिकल जापानी में "टॉप"।
• इनलाइन-एंड: अंग्रेजी में "राइट", लेकिन वर्टिकल जापानी में "बॉटम"।

भौतिक से लॉजिकल प्रॉपर्टीज़ में मैपिंग (लेवल 1)

लेवल 1 ने भौतिक से लॉजिकल प्रॉपर्टीज़ तक मैपिंग का एक व्यापक सेट पेश किया। यहां कुछ प्रमुख उदाहरण दिए गए हैं:

• विड्थ → इनलाइन-साइज़
• हाइट → ब्लॉक-साइज़
• मिन-विड्थ → मिन-इनलाइन-साइज़
• मैक्स-हाइट → मैक्स-ब्लॉक-साइज़
• मार्जिन-लेफ्ट → मार्जिन-इनलाइन-स्टार्ट
• मार्जिन-राइट → मार्जिन-इनलाइन-एंड
• मार्जिन-टॉप → मार्जिन-ब्लॉक-स्टार्ट
• मार्जिन-बॉटम → मार्जिन-ब्लॉक-एंड
• पैडिंग-लेफ्ट → पैडिंग-इनलाइन-स्टार्ट
• पैडिंग-टॉप → पैडिंग-ब्लॉक-स्टार्ट
• बॉर्डर-राइट → बॉर्डर-इनलाइन-एंड
• बॉर्डर-बॉटम → बॉर्डर-ब्लॉक-एंड
• लेफ्ट / राइट (पोजिशनिंग के लिए) → इनसेट-इनलाइन-स्टार्ट / इनसेट-इनलाइन-एंड
• टॉप / बॉटम (पोजिशनिंग के लिए) → इनसेट-ब्लॉक-स्टार्ट / इनसेट-ब्लॉक-एंड

लेवल 1 ने हमें मार्जिन-इनलाइन (स्टार्ट और एंड के लिए) और पैडिंग-ब्लॉक (स्टार्ट और एंड के लिए) जैसे उपयोगी शॉर्टहैंड भी दिए।

लेवल 2 में आपका स्वागत है: नया क्या है और यह क्यों मायने रखता है

जबकि लेवल 1 एक स्मारकीय कदम था, इसने कुछ ध्यान देने योग्य अंतराल छोड़ दिए। फ़्लोट, क्लियर और रिसाइज़ जैसी कुछ मूलभूत सीएसएस प्रॉपर्टीज़ के कोई लॉजिकल समकक्ष नहीं थे। इसके अलावा, बॉर्डर-रेडियस जैसी प्रॉपर्टीज़ को तार्किक रूप से नियंत्रित नहीं किया जा सका, जिससे डेवलपर्स को बारीक स्टाइलिंग के लिए भौतिक प्रॉपर्टीज़ पर वापस जाना पड़ा। इसका मतलब था कि आप लॉजिकल प्रॉपर्टीज़ के साथ 90% लेआउट बना सकते हैं, लेकिन फिर भी विभिन्न राइटिंग मोड के लिए भौतिक ओवरराइड की आवश्यकता होगी, जिससे आंशिक रूप से उद्देश्य विफल हो जाएगा।

सीएसएस लॉजिकल प्रॉपर्टीज़ लेवल 2 सीधे इन कमियों को दूर करता है। यह एक कट्टरपंथी नई प्रणाली शुरू करने के बारे में नहीं है, बल्कि लेवल 1 में शुरू हुई प्रणाली को पूरा करने के बारे में है। यह इसे दो प्राथमिक तरीकों से प्राप्त करता है:

1. पुरानी सीएसएस सुविधाओं के लिए नई लॉजिकल प्रॉपर्टीज़ और वैल्यूज़ पेश करना जो स्वाभाविक रूप से भौतिक थीं (जैसे फ़्लोट)।
2. जटिल शॉर्टहैंड के लिए लॉजिकल प्रॉपर्टी मैपिंग जोड़ना जिन्हें पहले अनदेखा कर दिया गया था (जैसे बॉर्डर-रेडियस)।

लेवल 2 के साथ, पूरी तरह से प्रवाह-सापेक्ष स्टाइलिंग प्रणाली का विजन लगभग पूरा हो गया है, जिससे हम जटिल, सुंदर और मजबूत कंपोनेंट बना सकते हैं जो हर जगह, हर किसी के लिए, हैक या ओवरराइड के बिना काम करते हैं।

गहन अध्ययन: लेवल 2 में नई लॉजिकल वैल्यूज़ और प्रॉपर्टीज़

आइए सबसे प्रभावशाली परिवर्धन का पता लगाएं जो लेवल 2 हमारे डेवलपर टूलकिट में लाता है। ये वे उपकरण हैं जो अंतराल को भरते हैं और वास्तव में सार्वभौमिक कंपोनेंट डिज़ाइन को सशक्त बनाते हैं।

फ़्लोट और क्लियर: लॉजिकल क्रांति

फ़्लोट प्रॉपर्टी वर्षों से सीएसएस लेआउट की आधारशिला रही है, लेकिन इसकी वैल्यू, लेफ्ट और राइट, भौतिक दिशा की परिभाषा हैं। यदि आप अंग्रेजी में एक पैराग्राफ के लेफ्ट में एक छवि फ़्लोट करते हैं, तो यह सही दिखता है। लेकिन दस्तावेज़ दिशा को अरबी के लिए दाएं-से-बाएं (RTL) पर स्विच करें, और छवि अब टेक्स्ट ब्लॉक के "गलत" पक्ष पर है। यह दाईं ओर होना चाहिए, जो लाइन की शुरुआत है।

लेवल 2 फ़्लोट प्रॉपर्टी के लिए दो नए, लॉजिकल कीवर्ड पेश करता है:

• फ़्लोट: इनलाइन-स्टार्ट; यह एक तत्व को इनलाइन दिशा की शुरुआत में फ़्लोट करता है। LTR भाषाओं में, यह लेफ्ट है। RTL भाषाओं में, यह राइट है। वर्टिकल-rl राइटिंग मोड में, यह टॉप है।
• फ़्लोट: इनलाइन-एंड; यह एक तत्व को इनलाइन दिशा के अंत में फ़्लोट करता है। LTR में, यह राइट है। RTL में, यह लेफ्ट है। वर्टिकल-rl में, यह बॉटम है।

इसी तरह, क्लियर प्रॉपर्टी, जिसका उपयोग फ़्लोटेड तत्वों के चारों ओर कंटेंट के रैपिंग को नियंत्रित करने के लिए किया जाता है, को इसके लॉजिकल समकक्ष मिलते हैं:

• क्लियर: इनलाइन-स्टार्ट; इनलाइन-स्टार्ट साइड पर फ़्लोट को क्लियर करता है।
• क्लियर: इनलाइन-एंड; इनलाइन-एंड साइड पर फ़्लोट को क्लियर करता है।

यह एक गेम-चेंजर है। अब आप क्लासिक छवि-के-साथ-टेक्स्ट-रैप लेआउट बना सकते हैं जो किसी भी भाषा दिशा में बिना किसी अतिरिक्त सीएसएस की एक भी लाइन के स्वचालित रूप से अनुकूलित हो जाते हैं।

लॉजिकल रिसाइज़ के साथ एन्हांस्ड कंट्रोल

रिसाइज़ प्रॉपर्टी, जिसका उपयोग आमतौर पर एक टेक्स्टएरिया पर किया जाता है, उपयोगकर्ताओं को एक तत्व का आकार बदलने की अनुमति देता है। इसकी पारंपरिक वैल्यू हॉरिजॉन्टल, वर्टिकल और बोथ हैं। लेकिन वर्टिकल राइटिंग मोड में "हॉरिजॉन्टल" का क्या मतलब है? इसका मतलब अभी भी भौतिक क्षैतिज अक्ष के साथ आकार बदलना है, जो उपयोगकर्ता या डिजाइनर का इरादा नहीं हो सकता है। उपयोगकर्ता शायद लाइनों को लंबा या छोटा बनाने के लिए अपने इनलाइन अक्ष के साथ तत्व का आकार बदलना चाहता है।

लेवल 2 रिसाइज़ के लिए लॉजिकल वैल्यू पेश करता है:

• रिसाइज़: इनलाइन; इनलाइन अक्ष के साथ आकार बदलने की अनुमति देता है।
• रिसाइज़: ब्लॉक; ब्लॉक अक्ष के साथ आकार बदलने की अनुमति देता है।

अंग्रेजी में एक टेक्स्टएरिया पर रिसाइज़: ब्लॉक; का उपयोग करने से उपयोगकर्ता इसे लंबा बना सकता है। वर्टिकल राइटिंग मोड में इसका उपयोग करने से उपयोगकर्ता इसे चौड़ा बना सकता है (जो ब्लॉक दिशा है)। यह बस काम करता है।

`कैप्शन-साइड`: टेबल कैप्शंस के लिए लॉजिकल पोजिशनिंग

कैप्शन-साइड प्रॉपर्टी एक टेबल के कैप्शन के प्लेसमेंट को निर्धारित करती है। पुरानी वैल्यू टॉप और बॉटम थीं। फिर, ये भौतिक हैं। यदि एक डिजाइनर का इरादा कैप्शन को टेबल की कंटेंट के "पहले" रखना है, तो टॉप हॉरिजॉन्टल राइटिंग मोड के लिए काम करता है। लेकिन वर्टिकल-rl मोड में, ब्लॉक प्रवाह का "स्टार्ट" टॉप पर नहीं, बल्कि दाईं ओर है।

लेवल 2 लॉजिकल समाधान प्रदान करता है:

• कैप्शन-साइड: ब्लॉक-स्टार्ट; कैप्शन को ब्लॉक प्रवाह की शुरुआत में रखता है।
• कैप्शन-साइड: ब्लॉक-एंड; कैप्शन को ब्लॉक प्रवाह के अंत में रखता है।

`टेक्स्ट-एलाइन`: एक मूलभूत लॉजिकल वैल्यू

जबकि टेक्स्ट-एलाइन के लिए वैल्यू स्टार्ट और एंड कुछ समय से हैं, वे लॉजिकल प्रॉपर्टीज़ दर्शन का एक मूल हिस्सा हैं और इन्हें मजबूत करने लायक हैं। टेक्स्ट-एलाइन: लेफ्ट; का उपयोग करना एक सामान्य गलती है जो तुरंत RTL भाषाओं में लेआउट समस्याएँ पैदा करती है। सही, आधुनिक दृष्टिकोण हमेशा उपयोग करना है:

• टेक्स्ट-एलाइन: स्टार्ट; टेक्स्ट को इनलाइन दिशा की शुरुआत में संरेखित करता है।
• टेक्स्ट-एलाइन: एंड; टेक्स्ट को इनलाइन दिशा के अंत में संरेखित करता है।

लेवल 2 का क्राउन जूल: लॉजिकल `बॉर्डर-रेडियस`

शायद लेवल 2 में सबसे महत्वपूर्ण और शक्तिशाली जोड़ सीमा त्रिज्या को तार्किक रूप से नियंत्रित करने के लिए प्रॉपर्टीज़ का सेट है। पहले, यदि आप चाहते थे कि एक कार्ड के कोने केवल "टॉप" पर गोल हों, तो आप बॉर्डर-टॉप-लेफ्ट-रेडियस और बॉर्डर-टॉप-राइट-रेडियस का उपयोग करेंगे। यह एक वर्टिकल राइटिंग मोड में पूरी तरह से टूट जाता है, जहां "टॉप" कोने अब स्टार्ट-स्टार्ट और एंड-स्टार्ट कोने हैं।

लेवल 2 चार नई लॉन्गहैंड प्रॉपर्टीज़ पेश करता है जो प्रवाह-सापेक्ष तरीके से एक तत्व के चार कोनों पर मैप करती हैं। नामकरण कन्वेंशन बॉर्डर-[ब्लॉक-एज]-[इनलाइन-एज]-रेडियस है।

• बॉर्डर-स्टार्ट-स्टार्ट-रेडियस: वह कोना जहां ब्लॉक-स्टार्ट और इनलाइन-स्टार्ट साइड मिलते हैं।
• बॉर्डर-स्टार्ट-एंड-रेडियस: वह कोना जहां ब्लॉक-स्टार्ट और इनलाइन-एंड साइड मिलते हैं।
• बॉर्डर-एंड-स्टार्ट-रेडियस: वह कोना जहां ब्लॉक-एंड और इनलाइन-स्टार्ट साइड मिलते हैं।
• बॉर्डर-एंड-एंड-रेडियस: वह कोना जहां ब्लॉक-एंड और इनलाइन-एंड साइड मिलते हैं।

शुरू में इसे विज़ुअलाइज़ करना मुश्किल हो सकता है, इसलिए आइए इसे विभिन्न राइटिंग मोड के लिए मैप करें:

`राइटिंग-मोड: हॉरिजॉन्टल-टीबी` (उदाहरण के लिए, अंग्रेजी) में `बॉर्डर-रेडियस` की मैपिंग

• बॉर्डर-स्टार्ट-स्टार्ट-रेडियस टॉप-लेफ्ट-रेडियस पर मैप करता है।
• बॉर्डर-स्टार्ट-एंड-रेडियस टॉप-राइट-रेडियस पर मैप करता है।
• बॉर्डर-एंड-स्टार्ट-रेडियस बॉटम-लेफ्ट-रेडियस पर मैप करता है।
• बॉर्डर-एंड-एंड-रेडियस बॉटम-राइट-रेडियस पर मैप करता है।

`dir="rtl"` (उदाहरण के लिए, अरबी) के साथ `राइटिंग-मोड: हॉरिजॉन्टल-टीबी` में `बॉर्डर-रेडियस` की मैपिंग

यहां, इनलाइन दिशा फ़्लिप की गई है।

• बॉर्डर-स्टार्ट-स्टार्ट-रेडियस टॉप-राइट-रेडियस पर मैप करता है। (ब्लॉक-स्टार्ट टॉप है, इनलाइन-स्टार्ट राइट है)।
• बॉर्डर-स्टार्ट-एंड-रेडियस टॉप-लेफ्ट-रेडियस पर मैप करता है।
• बॉर्डर-एंड-स्टार्ट-रेडियस बॉटम-राइट-रेडियस पर मैप करता है।
• बॉर्डर-एंड-एंड-रेडियस बॉटम-लेफ्ट-रेडियस पर मैप करता है।

`राइटिंग-मोड: वर्टिकल-आरएल` (उदाहरण के लिए, जापानी) में `बॉर्डर-रेडियस` की मैपिंग

यहां, दोनों अक्ष घूमे हुए हैं।

• बॉर्डर-स्टार्ट-स्टार्ट-रेडियस टॉप-राइट-रेडियस पर मैप करता है। (ब्लॉक-स्टार्ट राइट है, इनलाइन-स्टार्ट टॉप है)।
• बॉर्डर-स्टार्ट-एंड-रेडियस बॉटम-राइट-रेडियस पर मैप करता है।
• बॉर्डर-एंड-स्टार्ट-रेडियस टॉप-लेफ्ट-रेडियस पर मैप करता है।
• बॉर्डर-एंड-एंड-रेडियस बॉटम-लेफ्ट-रेडियस पर मैप करता है।

इन नई प्रॉपर्टीज़ का उपयोग करके, आप कॉर्नर रेडियस को परिभाषित कर सकते हैं जो सिमेंटिक रूप से कंटेंट के प्रवाह से बंधे हैं, न कि भौतिक स्क्रीन से। एक "स्टार्ट-स्टार्ट" कोना हमेशा सही कोना होगा, चाहे भाषा या टेक्स्ट दिशा कोई भी हो।

व्यावहारिक कार्यान्वयन: एक ग्लोबल-रेडी कंपोनेंट का निर्माण

सिद्धांत बहुत अच्छा है, लेकिन आइए देखें कि यह व्यवहार में कैसे काम करता है। हम एक साधारण प्रोफ़ाइल कार्ड कंपोनेंट का निर्माण करेंगे, पहले पुरानी भौतिक प्रॉपर्टीज़ का उपयोग करके, और फिर इसे लेवल 1 और लेवल 2 दोनों से आधुनिक लॉजिकल प्रॉपर्टीज़ का उपयोग करने के लिए रिफैक्टर करेंगे।

कार्ड में एक तरफ फ़्लोट की गई एक छवि, एक शीर्षक, कुछ टेक्स्ट और एक सजावटी बॉर्डर और गोल कोने होंगे।

"पुराना" तरीका: एक भंगुर, भौतिक-प्रॉपर्टी कार्ड

यहाँ बताया गया है कि हमने कुछ साल पहले इस कार्ड को कैसे स्टाइल किया होगा:

/* --- CSS (भौतिक गुण) --- */

.physical-card {

  width: 300px;

  padding: 20px;

  margin-bottom: 20px;

  border: 1px solid #ccc;

  border-left: 5px solid steelblue;

  border-top-left-radius: 8px;

  border-bottom-left-radius: 8px;

}

.physical-card .avatar {

  float: left;

  width: 80px;

  height: 80px;

  margin-right: 15px;

}

.physical-card h3 {

  margin-top: 0;

  text-align: left;

}

एक मानक अंग्रेजी LTR संदर्भ में, यह ठीक दिखता है। लेकिन अगर हम इसे dir="rtl" या राइटिंग-मोड: वर्टिकल-rl वाले कंटेनर के अंदर रखते हैं, तो लेआउट टूट जाता है। सजावटी बॉर्डर गलत साइड पर है, अवतार गलत साइड पर है, मार्जिन गलत है और गोल कोने गलत जगह पर हैं।

"नया" तरीका: एक मजबूत, लॉजिकल-प्रॉपर्टी कार्ड

अब, आइए लॉजिकल प्रॉपर्टीज़ का उपयोग करके उसी कंपोनेंट को रिफैक्टर करें। हम लेवल 1 और लेवल 2 से नए परिवर्धन दोनों से प्रॉपर्टीज़ का लाभ उठाएंगे।

/* --- CSS (तार्किक गुण) --- */

.logical-card {

  inline-size: 300px;

  padding: 20px; /* `padding` शॉर्टहैंड पहले से ही तार्किक है! */

  margin-block-end: 20px;

  border: 1px solid #ccc;

  border-inline-start: 5px solid darkcyan;

  border-start-start-radius: 8px; /* लेवल 2 पावर! */

  border-end-start-radius: 8px; /* लेवल 2 पावर! */

}

.logical-card .avatar {

  float: inline-start; /* लेवल 2 पावर! */

  inline-size: 80px;

  block-size: 80px;

  margin-inline-end: 15px;

}

.logical-card h3 {

  margin-block-start: 0;

  text-align: start;

}

परीक्षण और सत्यापन

इस नए CSS के साथ, आप कंपोनेंट को किसी भी कंटेनर में छोड़ सकते हैं, और यह स्वचालित रूप से अनुकूलित हो जाएगा।

• LTR संदर्भ में: यह मूल भौतिक संस्करण के समान दिखेगा।
• RTL संदर्भ में (dir="rtl"): अवतार दाईं ओर फ़्लोट होगा, इसका मार्जिन बाईं ओर होगा, सजावटी बॉर्डर दाईं ओर होगा, और टेक्स्ट स्टार्ट-एलाइन (दाईं ओर) होगा। गोल कोने सही ढंग से ऊपर-दाईं और नीचे-दाईं ओर होंगे। यह बस काम करता है।
• एक ऊर्ध्वाधर संदर्भ में (राइटिंग-मोड: वर्टिकल-आरएल): कार्ड की "चौड़ाई" (अब इसका ऊर्ध्वाधर इनलाइन-साइज़) 300px होगी। अवतार "टॉप" (इनलाइन-स्टार्ट) पर फ़्लोट होगा, जिसके "बॉटम" (इनलाइन-एंड) पर एक मार्जिन होगा। सजावटी बॉर्डर दाईं ओर (इनलाइन-स्टार्ट) पर होगा, और गोल कोने ऊपर-दाईं और ऊपर-बाएं ओर होंगे। कंपोनेंट ने बिना किसी मीडिया क्वेरी या ओवरराइड के पूरी तरह से खुद को सही ढंग से फिर से उन्मुख कर लिया है।

ब्राउज़र सपोर्ट और फ़ॉलबैक

यह सब बहुत शानदार लगता है, लेकिन ब्राउज़र सपोर्ट के बारे में क्या? अच्छी खबर यह है कि सभी आधुनिक ब्राउज़रों में लेवल 1 लॉजिकल प्रॉपर्टीज़ के लिए सपोर्ट उत्कृष्ट है। आप आज मार्जिन-इनलाइन-स्टार्ट और पैडिंग-ब्लॉक जैसी प्रॉपर्टीज़ का उपयोग कर सकते हैं और करना चाहिए।

नई लेवल 2 सुविधाओं के लिए सपोर्ट तेजी से बढ़ रहा है लेकिन अभी तक सार्वभौमिक नहीं है। फ़्लोट, क्लियर और रिसाइज़ के लिए लॉजिकल वैल्यू अच्छी तरह से समर्थित हैं। लॉजिकल बॉर्डर-रेडियस प्रॉपर्टीज़ सबसे नई हैं और अभी भी फीचर फ़्लैग के पीछे या हाल के ब्राउज़र संस्करणों में हो सकती हैं। हमेशा की तरह, आपको सबसे अद्यतित संगतता डेटा के लिए एमडीएन वेब डॉक्स या कैनआईयूज़.कॉम जैसे संसाधनों से परामर्श करना चाहिए।

प्रगतिशील संवर्द्धन के लिए रणनीतियाँ

चूंकि सीएसएस को लचीला बनाने के लिए डिज़ाइन किया गया है, इसलिए हम आसानी से पुराने ब्राउज़रों के लिए फ़ॉलबैक प्रदान कर सकते हैं। झरना यह सुनिश्चित करेगा कि यदि कोई ब्राउज़र किसी लॉजिकल प्रॉपर्टी को नहीं समझता है, तो वह बस इसे अनदेखा कर देगा और पहले परिभाषित भौतिक प्रॉपर्टी का उपयोग करेगा।

यहां बताया गया है कि आप फ़ॉलबैक-रेडी सीएसएस कैसे लिख सकते हैं:

.card {

  /* पुराने ब्राउज़रों के लिए फ़ॉलबैक */

  border-left: 5px solid darkcyan;

  border-top-left-radius: 8px;

  /* आधुनिक लॉजिकल प्रॉपर्टी जो फ़ॉलबैक को ओवरराइड करेगी */

  border-inline-start: 5px solid darkcyan;

  border-start-start-radius: 8px;

}

यह दृष्टिकोण सभी के लिए एक ठोस बेसलाइन अनुभव सुनिश्चित करता है, जबकि आधुनिक ब्राउज़रों पर उपयोगकर्ताओं के लिए एन्हांस्ड, एडेप्टिव लेआउट प्रदान करता है। उन परियोजनाओं के लिए जिन्हें कई राइटिंग मोड का समर्थन करने की आवश्यकता नहीं है, यह अधिक हो सकता है। लेकिन किसी भी वैश्विक एप्लिकेशन, डिज़ाइन सिस्टम या थीम के लिए, यह एक मजबूत और भविष्य-प्रूफ रणनीति है।

भविष्य तार्किक है: लेवल 2 से परे

भौतिक से लॉजिकल मानसिकता में संक्रमण आधुनिक सीएसएस में सबसे महत्वपूर्ण बदलावों में से एक है। यह हमारी स्टाइलिंग भाषा को एक विविध, वैश्विक वेब की वास्तविकता के साथ संरेखित करता है। यह हमें भंगुर, स्क्रीन-ओरिएंटेड हैक से दूर लचीले, कंटेंट-ओरिएंटेड डिज़ाइन की ओर ले जाता है।

क्या अभी भी अंतराल हैं? कुछ। बैकग्राउंड-पोजिशन या ग्रेडिएंट जैसी प्रॉपर्टीज़ के लिए लॉजिकल वैल्यू पर अभी भी चर्चा हो रही है। लेकिन लेवल 2 की रिलीज़ के साथ, दिन-प्रतिदिन के अधिकांश लेआउट और स्टाइलिंग कार्यों को अब पूरी तरह से लॉजिकल दृष्टिकोण का उपयोग करके पूरा किया जा सकता है।

डेवलपर्स के लिए कॉल टू एक्शन स्पष्ट है: डिफ़ॉल्ट रूप से लॉजिकल प्रॉपर्टीज़ का उपयोग करना शुरू करें। विड्थ के बजाय इनलाइन-साइज़ को अपना गो-टू बनाएं। बाएं और दाएं मार्जिन को अलग से सेट करने के बजाय मार्जिन-इनलाइन का उपयोग करें। यह केवल विभिन्न भाषाओं का समर्थन करने के बारे में नहीं है; यह बेहतर, अधिक लचीला सीएसएस लिखने के बारे में है। लॉजिकल प्रॉपर्टीज़ के साथ बनाया गया एक कंपोनेंट स्वाभाविक रूप से अधिक पुन: प्रयोज्य और अनुकूलनीय होता है, चाहे वह LTR, RTL या वर्टिकल लेआउट में उपयोग किया जाए। यह बस बेहतर इंजीनियरिंग है।

निष्कर्ष: प्रवाह को अपनाएं

सीएसएस लॉजिकल प्रॉपर्टीज़ लेवल 2 सिर्फ नई सुविधाओं का संग्रह नहीं है; यह एक विजन की पूर्ति है। यह उन अंतिम, महत्वपूर्ण टुकड़ों को प्रदान करता है जिनकी हमें उन लेआउट के निर्माण के लिए आवश्यकता होती है जो अपनी कंटेंट के प्राकृतिक प्रवाह का सम्मान करते हैं, चाहे वह प्रवाह कैसा भी हो। फ़्लोट: इनलाइन-स्टार्ट और बॉर्डर-स्टार्ट-स्टार्ट-रेडियस जैसी प्रॉपर्टीज़ को अपनाकर, हम अपने शिल्प को केवल स्क्रीन पर बॉक्स को पोजिशन करने से बढ़ाकर वास्तव में वैश्विक, समावेशी और भविष्य-प्रूफ वेब अनुभव डिज़ाइन करने तक ले जाते हैं।

अगली बार जब आप कोई नई परियोजना शुरू करते हैं या कोई नया कंपोनेंट बनाते हैं, तो मार्जिन-लेफ्ट टाइप करने से पहले रुकें। खुद से पूछें, "क्या मेरा मतलब लेफ्ट है, या मेरा मतलब स्टार्ट है?" उस छोटे से मानसिक बदलाव को करके, आप हर जगह, सभी के लिए अधिक अनुकूलनीय और एक्सेसिबल वेब में योगदान देंगे।